<template>
  <div>
    <my-header :ref="refName" title="登录" :clickLeft="onClickLeft" :clickRight="onClickRight">
      <!-- 左侧按钮插槽 -->
      <template #left>
        <i class="back-icon" ></i>
      </template>
      <!-- 右侧按钮插槽 -->
      <template #right>
        <span>注册</span>
      </template>
    </my-header>
  </div>
</template>

<script>
  // 引入myHeader
  import myHeader from "./myHeader";

  export default {
    name: "textHeader",
    components: {myHeader},
    data() {
      return {
        refName: 'myHeader'
      }
    },
    methods: {
      // 需要传递给头部组件的左侧按钮事件
      onClickLeft() {
        // 返回上一页
        // this.$router.go(-1);
        console.log('点击左侧...此处可写你要传递的方法（例如路由跳转）');
      },
      // 点击右侧按钮触发头部组件事件
      onClickRight() {
        console.log('点击右侧...此处可写你要传递的方法（例如路由跳转）');
      }
    }
  }
</script>

<style lang="less" scoped>
  // 头部区域
  .header {
    background-color: #EA2A1D;
    // 返回图标
    .back-icon {
      display: block;
      background: url("../../../static/images/myHeader/back-white.png") no-repeat 0 0;
      background-size: contain;
      width: 57px;
      height: 21px;
    }
    /* 导航栏区域 */
    /deep/ .van-nav-bar {
      /* 标题 */
      .van-nav-bar__title {
        color: #fff;
      }
      /*  右侧文本  */
      .van-nav-bar__right {
        color: #fff;
      }
    }
  }
</style>
